import React from 'react';
import { X } from 'lucide-react';
import { Play, Clock, Eye } from 'lucide-react';
import API_CONFIG from '../utils/apiConfig';

const VideoPlayer = ({ video, onClose }) => {
  if (!video) return null;

  return (
    <div className="video-player-overlay" onClick={onClose}>
      <div className="video-player-container" onClick={(e) => e.stopPropagation()}>
        <button className="video-player-close" onClick={onClose}>
          <X size={32} />
        </button>
        
        <div className="video-player-content">
          <video 
            controls 
            autoPlay 
            className="video-player"
            src={API_CONFIG.getURL('videos') + `/${video.filename}`}
          >
            Your browser does not support the video tag.
          </video>
          
          <div className="video-player-info">
            <h4 className="video-player-title">{video.title || video.point_name}</h4>
            <p className="video-player-channel">{video.channel}</p>
            <div className="video-player-stats">
               <span className="video-views">
                <Eye className="views-icon" />
                {video.object_labels?.join('、') || '无对象信息'} 
              </span>
             <span className="video-date">{video.start_time}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VideoPlayer;